/*
  @ 名称: 1像素圆角
  @ 描述: 需要自己设置宽度，或者高度，否则会随内容自适应
  @ 用法: 
    最外层：.sl-rc 
    内容层：.sl-rc-cnt
    鼠标经过：.sl-rc-hover
*/

/* base */
.sl-rc {
  display: inline-block;
  vertical-align: middle;
  // 可重设
  border: {
    left: 1px solid #ddd; 
    right: 1px solid #ddd;
  }
}

/* 
  不要直接给 BOTTON | INPUT[type=submit[button]] 添加边框
  这会引发 IE 的 1px 的黑边 bug
  Note: 一般不要把 input 作为.sl-rc-cnt 层 
 */
.sl-rc-cnt {
  float: left;
  position: relative;
  // 可重设
  border: {
    top: 1px solid #ddd; 
    bottom: 1px solid #ddd;
  }
  margin: -1px 0;
}

/* HACK for ie6 7 */
div.sl-rc {
  *display: inline;
}
@each $tag in p, h2, h3, h4, h5, h6, ul, ol {
  #{$tag}.sl-rc {
    @extend div.sl-rc;
  }
}

/* 鼠标经过 */
.sl-rc-hover, .sl-rc-hover .sl-rc-cnt,
.sl-rc:hover, .sl-rc:hover .sl-rc-cnt {
  // 可重设
  border-color: #aaa;
  text-decoration: none;
}